<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计信息 - NetFlow 网络流量管理系统</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <link rel="stylesheet" href="/luci-static/resources/netflow/css/style.css">
    <link rel="stylesheet" href="/luci-static/resources/netflow/js/statistics.js">
    <!-- <script src="/luci-static/resources/netflow/js/overview.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- <script src="common.js"></script> -->
    <script src="/luci-static/resources/netflow/js/common.js"></script>
</head>
<body>
    <header>
        <div class="container">
            <h1>NetFlow 网络流量管理系统</h1>
            <nav>
                <ul>
                    <!-- <li><a href="index.html">系统概览</a></li>
                    <li><a href="statistics.html" class="active">统计信息</a></li>
                    <li><a href="settings.html">系统设置</a></li>
                    <li><a href="docs.html">文档</a></li> -->

                    <li><a href="overview">系统概览</a></li>
                    <li><a href="statistics" class="active">统计信息</a></li>
                    <li><a href="settings">系统设置</a></li>
                    <li><a href="docs">文档</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <section class="card">
            <h2>流量统计</h2>
            <div id="traffic_chart" class="chart-large"></div>
        </section>
        
        <section class="card">
            <h2>应用流量统计</h2>
            <div id="app_chart" class="chart-large"></div>
        </section>
        
        <section class="card">
            <h2>优先级队列统计</h2>
            <div id="queue_chart" class="chart-large"></div>
        </section>
        
        <section class="card">
            <h2>丢包统计</h2>
            <div id="drop_chart" class="chart-large"></div>
        </section>
        
        <section class="card">
            <h2>流量分类统计</h2>
            <div class="table-container">
                <table id="classification_table">
                    <thead>
                        <tr>
                            <th>应用类型</th>
                            <th>流数量</th>
                            <th>字节数</th>
                            <th>包数量</th>
                            <th>分类准确率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>视频会议</td>
                            <td>128</td>
                            <td>1.25 GB</td>
                            <td>1,250,000</td>
                            <td>98.5%</td>
                        </tr>
                        <tr>
                            <td>语音通话</td>
                            <td>85</td>
                            <td>256 MB</td>
                            <td>850,000</td>
                            <td>97.2%</td>
                        </tr>
                        <tr>
                            <td>在线游戏</td>
                            <td>42</td>
                            <td>512 MB</td>
                            <td>420,000</td>
                            <td>95.8%</td>
                        </tr>
                        <tr>
                            <td>视频流媒体</td>
                            <td>56</td>
                            <td>3.5 GB</td>
                            <td>560,000</td>
                            <td>99.1%</td>
                        </tr>
                        <tr>
                            <td>音频流媒体</td>
                            <td>38</td>
                            <td>750 MB</td>
                            <td>380,000</td>
                            <td>98.7%</td>
                        </tr>
                        <tr>
                            <td>网页浏览</td>
                            <td>215</td>
                            <td>1.8 GB</td>
                            <td>2,150,000</td>
                            <td>96.3%</td>
                        </tr>
                        <tr>
                            <td>文件下载</td>
                            <td>24</td>
                            <td>4.2 GB</td>
                            <td>240,000</td>
                            <td>99.5%</td>
                        </tr>
                        <tr>
                            <td>P2P下载</td>
                            <td>18</td>
                            <td>2.8 GB</td>
                            <td>180,000</td>
                            <td>97.8%</td>
                        </tr>
                        <tr>
                            <td>其他</td>
                            <td>67</td>
                            <td>950 MB</td>
                            <td>670,000</td>
                            <td>92.4%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        
        <section class="card">
            <h2>设备流量统计</h2>
            <div class="table-container">
                <table id="device_table">
                    <thead>
                        <tr>
                            <th>设备 IP</th>
                            <th>MAC 地址</th>
                            <th>上行流量</th>
                            <th>下行流量</th>
                            <th>活动连接数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>192.168.1.100</td>
                            <td>AA:BB:CC:DD:EE:01</td>
                            <td>1.2 GB</td>
                            <td>3.5 GB</td>
                            <td>12</td>
                        </tr>
                        <tr>
                            <td>192.168.1.101</td>
                            <td>AA:BB:CC:DD:EE:02</td>
                            <td>850 MB</td>
                            <td>2.1 GB</td>
                            <td>8</td>
                        </tr>
                        <tr>
                            <td>192.168.1.102</td>
                            <td>AA:BB:CC:DD:EE:03</td>
                            <td>1.8 GB</td>
                            <td>4.2 GB</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td>192.168.1.103</td>
                            <td>AA:BB:CC:DD:EE:04</td>
                            <td>650 MB</td>
                            <td>1.5 GB</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>192.168.1.104</td>
                            <td>AA:BB:CC:DD:EE:05</td>
                            <td>2.3 GB</td>
                            <td>5.8 GB</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 NetFlow 开发团队 | <a href="docs.html">文档</a> | <a href="#">GitHub</a></p>
        </div>
    </footer>

    <!-- <script src="js/statistics.js"></script> -->
</body>
</html>
